<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   
<h3>下列说法正确的是(A B)</h3>
<p>A. display: none;不为被隐藏的对象保留其物理空间;</p>
<p>B. visibility:hidden;所占据的空间位置仍然存在,仅为视觉上的完全透明;</p>
<p>C. visibility:hidden;产生reflow和repaint(回流与重绘);</p>
<p>D. visibility:hidden;与display: none;两者没有本质上的区别;</p>


<p>
display: none和visibility:hidden的区别就是visibility:hidden会保留元素的空间 repaint(重绘) ，
repaint发生更改时，元素的外观被改变，且在没有改变布局的情况下发生，如改变outline,visibility,background color，不会影响到dom结构渲染。
reflow(渲染)，与repaint区别就是他会影响到dom的结构渲染，同时他会触发repaint，他会改变他本身与所有父辈元素(祖先)，这种开销是非常昂贵的，导致性能下降是必然的，页面元素越多效果越明显。 
所以display:none才会产生reflow visibility:hidden只会出发repaint
</p>
</body>
</html>